/**
* @Author luof
* @Date 2024/6/21 14:01
* @Description
*/
<template>
  <el-card>


    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="基本配置" name="first">
        <BaseSetting></BaseSetting>
      </el-tab-pane>
      <el-tab-pane label="支付配置" name="second">
        <PaySetting></PaySetting>
      </el-tab-pane>
      <el-tab-pane label="短信配置" name="third">
        <SmsSetting></SmsSetting>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import type {TabsPaneContext} from 'element-plus'
import BaseSetting from "./BaseSetting.vue";
import PaySetting from "./PaySetting.vue";
import SmsSetting from "./SmsSetting.vue";

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>

<style scoped lang="less">
/*web网站配置最小宽度*/
.demo-tabs {
  min-height: calc(100vh - 145px);
}


.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>